<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六边形能力图</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <!-- 自定义CSS -->
    <style>
        .hexagon-container {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }

        .hexagon-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.2;
        }

        .hexagon-chart {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .hexagon-labels {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .hexagon-label {
            position: absolute;
            transform: translate(-50%, -50%);
            font-size: 14px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container my-5">
    <h1 class="text-center mb-4">六边形能力图</h1>
    <div class="hexagon-container">
        <canvas id="hexagonBg" class="hexagon-bg"></canvas>
        <canvas id="hexagonChart" class="hexagon-chart"></canvas>
        <div class="hexagon-labels"></div>
    </div>

    <div class="row mt-5">
        <div class="col-md-6 mx-auto">
            <form id="skillsForm">
                <div class="mb-3">
                    <label for="skill1" class="form-label">技能1</label>
                    <input type="range" class="form-range" id="skill1" min="0" max="100" value="50">
                </div>
                <div class="mb-3">
                    <label for="skill2" class="form-label">技能2</label>
                    <input type="range" class="form-range" id="skill2" min="0" max="100" value="50">
                </div>
                <div class="mb-3">
                    <label for="skill3" class="form-label">技能3</label>
                    <input type="range" class="form-range" id="skill3" min="0" max="100" value="50">
                </div>
                <div class="mb-3">
                    <label for="skill4" class="form-label">技能4</label>
                    <input type="range" class="form-range" id="skill4" min="0" max="100" value="50">
                </div>
                <div class="mb-3">
                    <label for="skill5" class="form-label">技能5</label>
                    <input type="range" class="form-range" id="skill5" min="0" max="100" value="50">
                </div>
                <div class="mb-3">
                    <label for="skill6" class="form-label">技能6</label>
                    <input type="range" class="form-range" id="skill6" min="0" max="100" value="50">
                </div>
            </form>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JS -->
<script>
  $(document).ready(function() {
    // 技能标签
    const skills = ['编程', '设计', '沟通', '领导', '创新', '分析'];

    // 初始化技能值
    const initialSkills = {
      skill1: 50,
      skill2: 50,
      skill3: 50,
      skill4: 50,
      skill5: 50,
      skill6: 50
    };

    // 设置滑块初始值
    $.each(initialSkills, function(key, value) {
      $('#' + key).val(value);
    });

    // 绘制六边形背景（包含内部网格和对角线）
    function drawHexagonBackground() {
      const canvas = document.getElementById('hexagonBg');
      const ctx = canvas.getContext('2d');
      const width = canvas.width = $('.hexagon-container').width();
      const height = canvas.height = $('.hexagon-container').height();
      const centerX = width / 2;
      const centerY = height / 2;
      const radius = Math.min(width, height) * 0.4;
      const levels = 5; // 内部六边形网格的层数

      // 清除画布
      ctx.clearRect(0, 0, width, height);

      // 绘制内部六边形网格（优化后的线条）
      ctx.strokeStyle = 'rgba(100, 100, 100, 0.5)'; // 更深的颜色
      ctx.lineWidth = 1.2; // 稍粗的线条

      for (let i = levels; i > 0; i--) {
        const currentRadius = radius * (i / levels);
        drawHexagon(ctx, centerX, centerY, currentRadius);
      }

      // 绘制外部六边形边框（更粗更明显的线条）
      ctx.strokeStyle = 'rgba(70, 70, 70, 0.8)';
      ctx.lineWidth = 2;
      drawHexagon(ctx, centerX, centerY, radius);

      // 绘制对角线（更清晰的线条）
      drawDiagonals(ctx, centerX, centerY, radius);

      // 添加标签
      $('.hexagon-labels').empty();
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI / 3) - Math.PI / 2;
        const labelRadius = radius * 1.15;
        const x = centerX + labelRadius * Math.cos(angle);
        const y = centerY + labelRadius * Math.sin(angle);

        $('.hexagon-labels').append(
          `<div class="hexagon-label" style="left: ${x}px; top: ${y}px;">${skills[i]}</div>`
        );
      }
    }

    // 绘制六边形能力图（优化轮廓线）
    function drawHexagonChart() {
      const canvas = document.getElementById('hexagonChart');
      const ctx = canvas.getContext('2d');
      const width = canvas.width = $('.hexagon-container').width();
      const height = canvas.height = $('.hexagon-container').height();
      const centerX = width / 2;
      const centerY = height / 2;
      const radius = Math.min(width, height) * 0.4;

      // 获取技能值
      const skillValues = [];
      for (let i = 1; i <= 6; i++) {
        const value = parseInt($('#skill' + i).val());
        skillValues.push(value / 100 * radius);
      }

      // 清除画布
      ctx.clearRect(0, 0, width, height);

      // 绘制填充区域（带半透明边框）
      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI / 3) - Math.PI / 2;
        const x = centerX + skillValues[i] * Math.cos(angle);
        const y = centerY + skillValues[i] * Math.sin(angle);

        if (i === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      ctx.closePath();
      ctx.fillStyle = 'rgba(13, 110, 253, 0.5)';
      ctx.fill();

      // 绘制更清晰的边框
      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI / 3) - Math.PI / 2;
        const x = centerX + skillValues[i] * Math.cos(angle);
        const y = centerY + skillValues[i] * Math.sin(angle);

        if (i === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      ctx.closePath();
      ctx.strokeStyle = '#0d6efd';
      ctx.lineWidth = 2.5; // 加粗边框
      ctx.stroke();

      // 添加顶点标记点
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI / 3) - Math.PI / 2;
        const x = centerX + skillValues[i] * Math.cos(angle);
        const y = centerY + skillValues[i] * Math.sin(angle);

        ctx.beginPath();
        ctx.arc(x, y, 4, 0, Math.PI * 2);
        ctx.fillStyle = '#0d6efd';
        ctx.fill();
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 1;
        ctx.stroke();
      }
    }

    // 简化的六边形绘制函数
    function drawHexagon(ctx, x, y, radius) {
      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI / 3) - Math.PI / 2;
        const px = x + radius * Math.cos(angle);
        const py = y + radius * Math.sin(angle);

        if (i === 0) {
          ctx.moveTo(px, py);
        } else {
          ctx.lineTo(px, py);
        }
      }
      ctx.closePath();
      ctx.stroke();
    }

    // 优化的对角线绘制函数
    function drawDiagonals(ctx, x, y, radius) {
      ctx.strokeStyle = 'rgba(120, 120, 120, 0.6)'; // 更明显的颜色
      ctx.lineWidth = 1.2; // 稍粗的线条
      ctx.setLineDash([3, 3]); // 虚线样式

      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI / 3) - Math.PI / 2;
        const px = x + radius * Math.cos(angle);
        const py = y + radius * Math.sin(angle);

        ctx.moveTo(x, y);
        ctx.lineTo(px, py);
      }
      ctx.stroke();
      ctx.setLineDash([]); // 重置为实线
    }

    // 初始化图表
    drawHexagonBackground();
    drawHexagonChart();

    // 滑块变化时更新图表
    $('.form-range').on('input', function() {
      drawHexagonChart();
    });

    // 窗口大小改变时重绘
    $(window).resize(function() {
      drawHexagonBackground();
      drawHexagonChart();
    });
  });
</script>
</body>
</html>